<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性</title>
		<!-- 文本格式化属性针对文本相关操作（四种方式10个属性） 
		1.控制字体：font-family、font-size、font-weight
		2.控制文本布局：text-aglin、line-height、letter-spacing、word-spacing
		3.文本修饰效果：text-decoration、text-shadow
		4.处理文本的效果：white-space
		
		/** 错*/
		/* 对*/css3
		//错
		<!-- 错-->
		
		<style>
			/* css3语法：选择器{
			属性：属性值；
			属性：属性值；
			...
			} 
			叫法：一个样式
			*/
		   bod y div#q1{ /* 102*/
		   
			   color: blue;
			   /* 知识点1：文本格式化属性控制字体 
			   font-family: 字体家族，指定字体形式;
			   */
			   font-family: 楷体,sans-serif;
			   /* 设置多个字体：浏览器会按照顺序寻找可用字体 
			   用户体验；用户系统有什么字体，优先指定字体
			   通常与统配选择器使用   *{}
			   */
			  
			  /* 知识点2：文本格式化属性控制字体
			   font-size:字体大小属性，与单位共存
			   单位  px 像素|em 相对单位 理解：放大多少倍
			   */
			  
			  /* 知识点3：文本格式化属性控制字体
			   font-weight:字体粗细属性，不存在单位
			              属性值：数值【100 200 300 ....900】
						         单词【normal 】
			   */
			  font-weight: normal;
			  font-size: 5em;
			  /* 补充：1.英文大写；2.首字母小写 */
			  text-transform: lowercase;	
			  text-transform: capitalize;
			  text-transform: none;
			  
		   }
		   div#q1{ /*101*/
			   color: black;
			   /* 知识点4：文本格式化属性之控制文本格式 [对齐、间隙]
			   text-align（文本排列属性）
			   text-align : left/right/center/justify:两端对齐;
			   */
			  
			  text-align: justify;
			 
			   /* 知识点5：文本格式化属性控制文本格式 [对齐、间隙]
			   行高属性line-height:文本垂直效果
			   使用方式：1.高度属性：属性值一致
			            2.在高度属性上加行高属性
						
			   */
			 border: 1px solid red;
			 height: 100px;
			  lin e-height: 100px;
			  letter-spacing: 10px;
			  wo rd-spacing: 10px;
			  /* 补充：文本对齐和行高属于对齐|间隙：字符和单词之间的距离 */
			  /* 知识点6： 
			  letter-spacing:设置字符之间间隙
			  */
			 /* 知识点7： word-spacing:设置单词之间间隙 */
		   }
		  #q1{  /* 100*/
			  color: aqua;
		  }
		  a.q3{ /* 2*/
			  text-decoration: line-through;
			  text-shadow: -2px -2px 2px red;
		  }
		
		p{
			border: 1px solid red;
			/* 知识点10：文本换行效果
			 white-space:文本换行属性
			 属性值：nowrap不换行|pre不换行并且保留回车和空格|normal默认，空格合并，换行隐藏
			 */
			white-space: pre;
		}
		</style>
	</head>
	<body>
		<!-- 需求：创建div，添加假文【tab】
		          id选择器，通过加权找到div，添加颜色
		 -->
		 <div id="q1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero vitae rerum fugit aperiam obcaecati accusamus laboriosam distinctio? A quisquam eius sit minima voluptas impedit expedita, aperiam enim quae nesciunt perspiciatis.</div>
		 <h4>文本修饰效果</h4>
		 <!-- 文本修饰相关属性
		  知识点8：ttext-decoration属性：设置超链接样式
		  使用方法：与通配符一起使用，设置全局页面超链接样式
		  属性值：none|underline|line-through
		  -->
		  <!-- 知识点9：text-shadow 修饰文本阴影
		   属性值：X轴  Y轴 blur模糊距离 color
		   -->
		 <a href="https://tsgzy.edu.cn/col/1654135135174/index.html" class="q3">实现跳转【方式：6种】</a>
		<marquee >
			<h4>处理文本效果</h4>
		</marquee>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est libero ipsum consequatur ut quia assumenda laborum iusto, quidem illo quaerat vero neque? Dolore voluptatum tempora non voluptates aliquid repudiandae. Quas?</p>
			
		
	</body>
</html>